<template>
	<div id="navigationBar" class="right-navigation-bar" style="height: auto !important;">
		<div class="right-navigation-bar-top right-navigation-bar-1 bar-tips"
			style="height: auto !important; padding-bottom: 17px;">
			<div class="flex-right">
				<div class="right-navigation-bar-tips"></div>
				<div class="right-navigation-bar-title">{{ state.title }}</div>
			</div>
			<div style="width: 320px;height: 200px;margin-top: 20px;">
				<Carousel :sliders="state.sliders" :duration="2" :autoplay="true"></Carousel>
			</div>
		</div>
		<div class="right-navigation-bar-border right-navigation-bar-border-icon bar-tips">
		</div>
		<div class="right-navigation-bar-top tipsMock" style="height: auto !important; padding-bottom: 17px;">
			<div class="flex-right">
				<div class="right-navigation-bar-tips"></div>
				<div class="right-navigation-bar-title ">{{ state.studyGuide.title }}</div>
			</div>
			<div style="padding-right: 15px;" v-html="state.studyGuide.content"></div>
		</div>
	</div>
</template>

<script setup>
	import Carousel from "./Swiper.vue";
	import {
		onBeforeMount,
		onMounted,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	const {
		proxy
	} = getCurrentInstance()
	const props = defineProps(['test'])
	const router = useRouter()
	const route = useRoute()
	const state = reactive({
		title: '',
		sliders: [],
		studyGuide: ''
	})

	onMounted(() => {
		console.log(props.test)
		let posterData = JSON.parse(localStorage.getItem('posterData'))
		let posterStr = posterData[1].photoPath
		let posterArr = posterStr.split(',')
		setTimeout(function(item) {
			posterArr.forEach(function(item) {
				state.sliders.push({
					imgUrl: 'http://ielts.tuyaedu.com/boot/sys/common/static/' + item
				})
			})
		}, 1000)
		state.title = posterData[1].title
		state.studyGuide = posterData[2]
	})
</script>

<style>
</style>